<template>
  <div class="teacherList">
    <el-form
      ref="formInlineRef"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item prop="name" label="讲师名称">
        <el-input
          v-model="formInline.name"
          placeholder="请输入讲师名称"
          clearable
        />
      </el-form-item>

      <el-form-item label="讲师头衔">
        <el-select v-model="formInline.level" clearable placeholder="头衔">
          <el-option value="1" label="高级讲师" />
          <el-option value="2" label="首席讲师" />
        </el-select>
      </el-form-item>

      <el-form-item prop="createdTime" label="注册时间">
        <el-date-picker
          v-model="formInline.createdTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="getList"
          >查询</el-button
        >
        <el-button :icon="Refresh" @click="resetForm(formInlineRef)"
          >清空</el-button
        >
      </el-form-item>
    </el-form>
    <el-button type="danger" :icon="CirclePlus" @click="teacherAdd"
      >添加讲师</el-button
    >
    <el-button type="danger" :icon="Delete"  @click="delMore" >批量删除</el-button>
    <!-- 表格组件 -->

    <el-table :data="tableData" border stripe  @selection-change="handleSelection">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="序号" width="80"> </el-table-column>
      <el-table-column prop="name" label="名称" width="80" />
      <el-table-column prop="level" label="头衔" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.level === 1" type="success">高级讲师</el-tag>
          <el-tag v-if="scope.row.level === 2">首席讲师</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="头像" width="150">
          <template #default="scope">
            <div class="teachernfo">
              <img
                :src="scope.row.avatar"
                alt=""
                style="width: 130px; height: 100px"
              />
            </div>
          </template>
        </el-table-column>
      <el-table-column prop="intro" label="资历" width="400" />
      <el-table-column prop="sort" label="排序" width="60" />
      <el-table-column prop="joinDate" label="入驻时间" width="160" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="warning" link @click="toEdit(scope.row.id)"
            ><el-icon>
              <EditPen /> </el-icon
            >修改</el-button
          >
          <el-button type="danger" link @click="del(scope.row.id)"
            ><el-icon>
              <Delete /> </el-icon
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <!-- 给当前组件使用中文包 -->
    <el-config-provider :locale="locale">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getList"
        @current-change="getList"
      />
    </el-config-provider>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Search,
  Edit,
  Delete,
  Refresh,
  CirclePlus,
} from "@element-plus/icons-vue";
import type { Action, FormInstance } from "element-plus";
import { useRouter } from "vue-router";
// 引入中文包
import zhCn from "element-plus/es/locale/lang/zh-cn";
// 消息提示
import { ElMessage, ElMessageBox, SCOPE } from "element-plus";
import axios from "../../assets/js/axios";
import { number } from "echarts";

// 分页器数据
const locale = zhCn;
const router = useRouter();
const formInlineRef = ref<FormInstance>();
const currentPage4 = ref(1);
const pageSize4 = ref(4);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const total = ref(0);
// 搜索表单数据
const formInline = reactive({
  name: "",
  level: "",
  createdTime: "",
});
// 表格数据 响应式数据
const tableData = ref([]);
const selectDate = ref<Array<any>>([]);
//表格选择事件
const handleSelection = (val: Array<any>) => {
  console.log(val);
  selectDate.value = val.map((item) => item.id);
};

// 点击清空按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  // 调用表单重置方法
  formEl.resetFields();
  formInline.createdTime="",
  formInline.level="",
  getList();
};

// 点击删除
const del = (id: number) => {
  ElMessageBox.alert("确认删除吗？", "提示", {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: "确认",
    callback: (action: Action) => {
      console.log(action);
      if (action === "confirm") {
        axios.del("/serviceedu/edu-teacher/delTeacher/" + id,{} ).then((res: any) => {
          if (res.code === 200) {
            //提示删除成功
            ElMessage({
              message: "删除数据成功",
              type: "success",
            });
            // 刷新列表
            getList();
          }
        });
      }
    },
  });
};

//点击批量删除
const delMore = () => {
  if (selectDate.value.length > 0) {
    //删除
    //弹出删除提示框
    ElMessageBox.alert("您确认删除吗？", "提示", {
      // if you want to disable its autofocus
      // autofocus: false,
      confirmButtonText: "确认",
      callback: (action: Action) => {
        console.log(action);
        if (action === "confirm") {
            axios.del("/serviceedu/edu-teacher/delMoreTeacher?ids="+selectDate.value,{}).then((res: any) => {
            if (res.code == 200) {
              ElMessage({
                type: "success",
                message: "删除角色成功",
              });
              getList()
            }
          });
        }
      },
    });
  } else {
    //提示
    ElMessage({
      message: "Congrats, this is a success message.",
      type: "success",
    });
  }
};
// 分页器事件

// 点击编辑
const toEdit = (id: number) => {
  // 跳转添加页面
  router.push({ path: "/Add", query: { id: id } });
};

// 定义分页+条件请求方法
const getList = () => {
  axios
    .get("/serviceedu/edu-teacher/getPageBatchs", {
      page: currentPage4.value,
      size: pageSize4.value,
      name: formInline.name,
      level: formInline.level,
      beginTime: formInline.createdTime[0],
      EndTime: formInline.createdTime[1],
    })
    .then((res: any) => {
      console.log(res);
      // 接收总条数
      total.value = res.data.total;
      // 接收列表数据
      tableData.value = res.data.list;
    });
};
// 调用用户初始化查询数据方法
getList();

const teacherAdd = () => {
  router.push("/Add");
};
</script>

<style lang="less" scoped>
.demo-form-inline {
  .el-input {
    --el-input-width: 210px;
  }

  .el-select {
    --el-select-width: 210px;
  }
}

.demo-form-inline {
  .el-select {
    --el-select-width: 210px;
  }
}

.el-table {
  margin: 20px 0;
}
</style>